const tbody = document.querySelector('tbody')


// 成绩录入
async function render() {
   const res =  await axios({
        url:'/score/list'
        
    })
    console.log(res);
    const data = res.data.data // 是一个对象
    // console.log(data); 
    let html = ``

    for (const key in data) {
        // console.log(data[key]); 
       html += `
       <tr>
       <th class="score">${key}</th>
       <td class="score">${data[key].name}</td>
       <td class="score" data-id="${key}" data-batch="${1}">${data[key].score[0]}</td>
       <td class="score" data-id="${key}" data-batch="${2}">${data[key].score[1]}</td>
       <td class="score" data-id="${key}" data-batch="${3}">${data[key].score[2]}</td>
       <td class="score" data-id="${key}" data-batch="${4}">${data[key].score[3]}</td>
       <td class="score" data-id="${key}" data-batch="${5}">${data[key].score[4]}</td>
     </tr>
       `
    }
    tbody.innerHTML = html
}

render()

// 修改与编辑成绩
/*
1. 给 大表格绑定双击鼠标事件
2.  
 */
tbody.addEventListener('dblclick',async function(e){
    // console.log(123);
    if (e.target.classList.contains('score')) {
        // console.log(123);
        // 给td 增加 input
        const input = document.createElement('input')
        input.type = 'text'
        // 插入到 td 中
        e.target.append(input)

        // 把input 标签 显示出来
        input.style.display = 'block'
        // 显示旧成绩
        input.value = e.target.innerText
        // 自动获取焦点
        input.focus()
        const {id,batch} = e.target.dataset

        input.addEventListener('keyup', function(ev){
            if (ev.key === 'Enter') {
                remove()
                // 解除 失焦事件的绑定
                input.removeEventListener('blur', remove)
            }           
        })  
        // 失去焦点
        input.addEventListener('blur', remove)
        
        async function remove() {
            const res = await axios({
            url:'/score/entry',
            method:'post',
            data:{
                stu_id:id,
                batch,
                score:input.value
            }
        })
        console.log(res);
        if (res.data.code === 0) {
            toastr.success("修改成功")             
        }
      }             
    }   
})